<template>
  <view class="container">
    <view class="header" :style="{ paddingTop: safeArea.top + 'px' }">
      <view class="no-login" v-if="userInfo == null">
        <span class="login-button" @click="login">登录/注册</span>
        <span class="ps">再忙也不要忘记吃饭哦~</span>
      </view>

      <view class="already-logged" @click="toMyInfo" v-else>
        <view class="left">
          <view class="avatar">
            <image :src="userInfo.avatar" class="image-fill" />
          </view>
          <span class="nickname">{{ userInfo.nickname }}</span>
        </view>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <view class="body">
      <nav-box class="nav-box" nav-box-name="我的资产">
        <template #nav-items>
          <view class="menus">
            <view @click="toPage('/pages/profile/platform-coupon/index')" class="menu">
              <view class="icon-name">
                <uni-icons custom-prefix="iconfont" type="icon-youhuiquan" size="23" color="#ffad30"></uni-icons>
                <span class="name">神券</span>
              </view>
              <span class="info">
                <template v-if="assetsInfo?.validPlatformCouponCount !== 0">
                  <span class="count">{{ assetsInfo?.validPlatformCouponCount ?? '-' }}</span
                  >张未使用
                </template>
                <template v-else>无可用券</template>
              </span>
            </view>
            <view @click="toPage('/pages/profile/shop-coupon/index')" class="menu">
              <view class="icon-name">
                <uni-icons custom-prefix="iconfont" type="icon-youhuijuan" size="23" color="#f95749"></uni-icons>
                <span class="name">优惠券</span>
              </view>
              <span class="info">
                <template v-if="assetsInfo?.validShopCouponCount !== 0">
                  <span class="count">{{ assetsInfo?.validShopCouponCount ?? '-' }}</span
                  >张未使用
                </template>
                <template v-else>无可用券</template>
              </span>
            </view>
            <view @click="toPage('/pages/address/index')" class="menu">
              <view class="icon-name">
                <uni-icons custom-prefix="iconfont" type="icon-jifen" size="23" color="#fbcb45"></uni-icons>
                <span class="name">积分</span>
              </view>
              <span class="info"
                ><span class="count">{{ assetsInfo?.points ?? '-' }}</span
                >个积分</span
              >
            </view>
            <view @click="toPage('/pages/address/index')" class="menu">
              <view class="icon-name">
                <uni-icons custom-prefix="iconfont" type="icon-wallet" size="23" color="#d81e06"></uni-icons>
                <span class="name">钱包</span>
              </view>
              <span class="info"
                ><span class="count">{{ assetsInfo?.walletAmount ?? '-' }}</span
                >元</span
              >
            </view>
          </view>
        </template>
      </nav-box>
      <nav-box
        class="nav-box"
        nav-box-name="我的功能"
        :menus="[
          {
            image: '/static/image/profile/functional-area/address.png',
            name: '地址管理',
            url: '/pages/address/index'
          },
          {
            image: '/static/image/profile/functional-area/collect.png',
            name: '我的收藏',
            url: '/pages/profile/shop-collect/index'
          },
          {
            image: '/static/image/profile/functional-area/delivery.png',
            name: '跑脚服务'
          },
          {
            image: '/static/image/profile/functional-area/contact-us.png',
            name: '联系我们',
            openType: 'contact'
          }
        ]"
      >
      </nav-box>
    </view>
  </view>
</template>

<script setup lang="ts">
import $API from '@/api'
import $store from '@/store'
import { UserInfo } from '@/types/response/user'
import { onMounted, ref } from 'vue'
import NavBox from '@/components/nav-box/index.vue'
import type { AssetsStatisticsVO } from '@/types/response/coupon'

// 获取屏幕边界到安全区域距离
const { safeArea } = $store.app.getSystemParam()
const userInfo = ref<UserInfo | null>(null)
const assetsInfo = ref<AssetsStatisticsVO | null>(null)
async function login() {
  await $store.user.loginSetToken()
  refreshUserInfo()
}
// 获取用户信息
async function refreshUserInfo() {
  const userInfoFromStore = $store.user.userInfo.valueRef
  if (userInfoFromStore.value == null) await $store.user.updateUserInfo()
  if (userInfoFromStore.value != null) userInfo.value = userInfoFromStore.value
}
// 去指定页面
function toPage(url: string) {
  uni.navigateTo({ url })
}
async function assetsStatisticsInfo() {
  // 请求用户资产统计信息
  const result = await $API.user.assetsStatistics()
  if (!result.success) {
    // 可以提示获取信息失败了
    return
  }
  assetsInfo.value = result.data
}
// 当监听到优惠券信息需要刷新时进行刷新
$store.coupon.couponListRefresh.on(assetsStatisticsInfo)
onMounted(async () => {
  refreshUserInfo()
  assetsStatisticsInfo()
})
// to 我的信息
function toMyInfo() {
  uni.navigateTo({ url: '/pages/profile/my-info/index' })
}
</script>

<style scoped lang="scss">
$body-bg-color: #f6f6f6;
$radian-height: 40rpx;

.container {
  height: 100vh;
  background-color: $body-bg-color;

  /* 头部 */
  .header {
    display: flex;
    align-items: flex-end;
    padding-bottom: 60rpx;
    height: 200rpx;
    background-color: #ffd350;

    .no-login {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 0 100rpx;
      width: 100vw;
      height: 100px;
      flex-direction: column;

      .login-button {
        font-size: 40rpx;
        color: #42b983;
      }

      .ps {
        font-size: 25rpx;
        line-height: 50rpx;
        color: #616161;
      }
    }

    .already-logged {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 50rpx;
      width: 100%;
      height: 160rpx;
      box-sizing: border-box;

      .left {
        display: flex;
        align-items: center;

        .avatar {
          overflow: hidden;
          margin-right: 40rpx;
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          background-color: #fff;
        }

        .nickname {
          font-size: 33rpx;
          font-weight: 700;
        }
      }
    }
  }

  .body {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    width: 100vw;
    flex-direction: column;

    .nav-box {
      margin-bottom: 20rpx;
      width: 100%;

      .menus {
        display: flex;
        flex-wrap: wrap;

        .menu {
          display: flex;
          align-items: center;
          margin-top: 10px;
          width: 25%;
          flex-direction: column;

          .icon-name {
            display: flex;
            align-items: center;

            .image {
              width: 40rpx;
              height: 40rpx;
            }

            .name {
              display: inline-block;
              margin-left: 10rpx;
              font-size: 30rpx;
              font-weight: 700;
            }
          }

          .info {
            font-size: 25rpx;
            line-height: 50rpx;
            color: #616161;

            .count {
              font-size: 28rpx;
              color: red;
            }
          }
        }
      }
    }
  }
}

.body::before {
  content: '';
  position: absolute;
  top: -$radian-height;
  display: block;
  width: 100vw;
  height: $radian-height;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  background-color: $body-bg-color;
}
</style>
